import { homeApi } from './utils/axiosapi.js'

const { ref, reactive } = Vue

export default {
  async setup() {
    const router = VueRouter.useRouter()
    const homeData = await homeApi()

    const state = reactive({
      tags: homeData.categories,
      cards: homeData.videos,
      selectedTags: []
    })

    const handleChange = async (tag, checked) => {
      if(checked){
        state.selectedTags = [tag]
        state.cards = (await homeApi(tag.id)).videos
      }else{
        state.selectedTags = []
        state.cards = (await homeApi()).videos
      }
    }

    const handleClick = card => {
      router.push(`/video/show/${card.id}`)
    }

    const fallbackImg = ''
    const avatarImg = ''

    return { state, handleChange, fallbackImg, avatarImg, handleClick }
  },
  template: `
    <a-row>
      <a-col :span="24">
        <span :style="{ marginRight: '8px' }">推荐:</span>
      </a-col>
    </a-row>
    <a-divider />
    <a-row :gutter="[8,8]">
      <template v-if="state.cards.length > 0">
        <a-col :span="4" v-for="card in state.cards" :key="card.id">
          <a-card hoverable>
            <template #cover>
              <a-image :alt="card.videoName" :src="card.videoLogo" :fallback="fallbackImg" />
            </template>
            <template #actions>
              <i class="fa fa-eye" @click="handleClick(card)">查看({{card.videoHits}})</i>
            </template>
            <a-card-meta :title="card.creatorNick" :description="card.videoName">
              <template #avatar>
                <a-avatar :src="avatarImg" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </template>
      <a-col :span="24" v-else>
        <a-empty />
      </a-col>
    </a-row>
    <a-divider />
    <a-row>
      <a-col :span="24">
        <span :style="{ marginRight: '8px' }">类别:</span>
        <template v-for="tag in state.tags" :key="tag.id">
          <a-checkable-tag
            :checked="state.selectedTags.indexOf(tag) > -1"
            @change="checked => handleChange(tag, checked)"
            style="font-size: 14px;"
          >
            {{ tag.categoryName }}
          </a-checkable-tag>
        </template>
      </a-col>
    </a-row>
    <a-divider />
    <a-row :gutter="[8,8]">
      <template v-if="state.cards.length > 0">
        <a-col :span="4" v-for="card in state.cards" :key="card.id">
          <a-card hoverable>
            <template #cover>
              <a-image :alt="card.videoName" :src="card.videoLogo" :fallback="fallbackImg" />
            </template>
            <template #actions>
              <i class="fa fa-eye" @click="handleClick(card)">查看({{card.videoHits}})</i>
            </template>
            <a-card-meta :title="card.creatorNick" :description="card.videoName">
              <template #avatar>
                <a-avatar :src="avatarImg" />
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </template>
      <a-col :span="24" v-else>
        <a-empty />
      </a-col>
    </a-row>
  `
}
